<template>
	<view v-if="isShow">
		<u-navbar>
			<view class="slot-wrap">
				<view class="navitem" @click="tab(0)" :class="{'navb':tflag==0}">商品</view>
				<view class="navitem" @click="tab(1)" :class="{'navb':tflag==1}">评价</view>
				<view class="navitem" @click="tab(2)" :class="{'navb':tflag==2}">详情</view>
				<view class="cart" @click="toCart">
					<u-icon name="shopping-cart" color="#F0812D" size="50"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<!-- 轮播图 -->
			<view class="swiperbox">
				<swiper class="swiper" autoplay="autoplay" interval="3000" circular="true" @change="changeindex">
					<swiper-item v-for="item in goodsinfo.goodsImage">
						<image :src="item.imageUrl" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="num">{{index}}/{{goodsinfo.goodsImage.length}}</view>
			</view>
			<!-- 信息 -->
			<view class="p-box" v-if="goodsinfo.goods.isVip==1">
				<view class="price">
					￥{{price}}
				</view>
				<view class="by">
					包邮
				</view>
				<!-- 收藏的星 -->
				<!-- <image src="../../static/icon/lick.png" class="lickimg"></image> -->
			</view>
			<view class="p-box" v-if="goodsinfo.goods.isVip==0">
				<view class="price">
					{{price}}积分
				</view>
				<view class="by">
					包邮
				</view>
				<!-- 收藏的星 -->
				<!-- <image src="../../static/icon/lick.png" class="lickimg"></image> -->
			</view>
			<!-- 秒杀 -->
			<view class="seckill" v-if="flashsale==4">
				<image style="width: 69rpx; margin-left: 14rpx;" src="../../static/product/miaosha.png" mode="widthFix"></image>
				<view class="seckill_price">
					<view class="after">￥{{price}}</view>
					<view class="ago"><s>￥{{linePrice}}</s></view>
				</view>
				<view>
					<!-- <view class="juli">距结束仅剩</view> -->
					<view></view>
				</view>
			</view>
			<!-- 团购 -->
			<view class="seckill" v-if="flashsale==5">
				<image style="width: 88rpx; margin-left: 14rpx;" src="../../static/product/pin.png" mode="widthFix"></image>
				<view class="pseckill_price">
					<view class="after">￥{{yuan}}</view>
					<view class="ago" style="margin-left:20rpx;"><s>￥{{price}}</s></view>
				</view>
				<view>
					<view class="juli"></view>
					<view></view>
				</view>
			</view>

			<view class="pname">
				{{goodsinfo.goods.goodsName}}
			</view>
			<!-- 销量 -->
			<view class="x-box" v-if="goodsinfo.goodsSku.length>0">
				<view class="x-item"><text style="margin-right: 20rpx;">销量</text><text>{{goodsinfo.goods.salesActual}}</text></view>
				<view class="x-item"><text style="margin-right: 20rpx;">库存</text><text>{{stockNum}}</text></view>
				<view class="x-item"><text style="margin-right: 20rpx;">浏览量</text><text>{{goodsinfo.goods.views || "10000+"}}</text></view>
			</view>
			<!-- 拼团信息 -->
			<view class="spell-box" v-if="flashsale==5&&groupList.length>0">
				<view class="spell-title">
					<view class="spell-left">
						已开团
					</view>
					<view class="spell-center">
						可参与拼单
					</view>
					<!-- <view class="spell-right">
						查看全部
					</view> -->
				</view>
				<view class="spell-content" v-for="(item,index) in groupList">
					<view class="spell-left">
						<image :src="item.imageUrl" mode=""></image>
					</view>
					<view class="spell-center">
						<text>{{item.nickName}}</text>
					</view>
					<view class="time-box">
						<!-- endTime为结束的时间 startTime为请求到的当前服务端时间  格式YYYY-MM-DD HH:mm:ss-->
						<countdown :endTime="item.endTime" :startTime="item.newTime" :id="item.activeId" @overTime="delTime"/>
					</view>
					<view class="spell-right">
						<view @click="toGroup(item.activeId)">去拼团</view>
					</view>
				</view>
			</view>
			<!-- 购买类型 -->
			<!-- <view class="x-box">
				<text>购买类型</text>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view> -->
			<!-- 商品评价 -->
			<view class="pj-box" v-if='goodsinfo.comments.length>0'>
				<text class="pinjia">商品评价</text>
				<view class="good" @click="gocommentlist">
					<text>更多评价</text>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			<!-- 评价类容 -->
			<view class="pc-box" v-if='goodsinfo.comments.length>0'>
				<view class="pc-item" v-for="item in goodsinfo.comments">
					<view class="pc-i-t">
						<image :src="item.imageUrl" mode="aspectFill" class="pimg"></image>
						<view class="pc-name">
							<view>{{item.nickName}}</view>
							<!-- <u-rate :count="count" v-model="value" :disabled="true" size="28"></u-rate> -->
						</view>
					</view>
					<view class="pcon">
						{{item.content}}
					</view>
					<view class="piimg-box" v-if="item.commentImageUrl!=''&&item.commentImageUrl!=null">
						<image :src="it" mode="aspectFill" v-for="it in item.commentImageUrl.split(',')" class="p-img" @click="previewImage(url,item.commentImageUrl.split(','))"></image>
					</view>
					<view class="time">{{$u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
			</view>
			<view class="allp" @click="gocommentlist" v-if='goodsinfo.comments.length>0'>
				查看全部评价
			</view>
			<view class="no" v-if='goodsinfo.comments.length==0'>暂无评价~~~</view>
			<!-- 店铺名称  暂时注释-->
			<!-- <view class="dp-box">
				<view class="dplogo">
					<image src="../../static/icon/lick.png" mode="aspectFill" class="logo"></image>
					<view class="dptitle">一加手机六合官方旗舰店</view>
				</view>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view> -->
			<!-- 商品详情的富文本类容 -->
			<view class="gcon">商品详情</view>
			<view class="fuwenb">
				<rich-text :nodes="goodsinfo.goods.content | formatRichText"></rich-text>
			</view>
			<!-- 底部的购买按钮组 -->
			<view class="btnbox">
				<view class="btn" @click="addcat" v-if="goodsinfo.goods.isVip==0&&flashsale!=5&&flashsale!=4">加入购物车</view>
				<view class="btn" @click="mai(1)" v-if="flashsale!=5&&flashsale!=4">立即购买</view>
				<view class="btn" @click="mai(6)" v-if="flashsale==4">立即购买</view>
				<view class="btn"  v-if="flashsale==5" @click="mai(2)" >发起拼团</view>
				<view class="btn" @click="mai(3)" v-if="flashsale==5&&goodsinfo.goods.isAlone==1">单独购买</view>
			</view>
		</view>
		<view>

		</view>
		<u-mask :show="show" @click="show = false" :z-index="1000" :duration="50" v-if="goodsinfo.goodsSku.length>0">
			<view class="warp" @tap.stop>
				<view class="gebox">
					<image :src="img" mode="aspectFill" class="minimg"></image>
					<view class="r-g-box">
						<view class="gename">{{goodsinfo.goods.goodsName}}</view>
						<view class="geprice" v-if="goodsinfo.goods.isVip==1">￥{{price}}</view>
						<view class="geprice" v-if="goodsinfo.goods.isVip==0">{{price}}积分</view>
					</view>
					<view></view>
				</view>
				<!-- 规格信息 -->
				<view class="guigebox" v-for="(item,index) in guigelist" v-if="flag">
					<view class="guigetitle">{{item.specName}}</view>
					<view class="guigeitem">
						<text class="guigeitemtitle " v-for="(it,i) in item.groupBy" :class="{'guigeitemtitlestyle':guige[index]==it.specValueId}"
						 @click="xzgg(index,it.specValueId)">{{it.specValue}}</text>
					</view>
				</view>
				<!-- 选择数量功能暂时只有积分商品使用 -->
				<view class="numbox" v-if="goodsinfo.goods.isVip==0">
					<view>确定</view>
					<u-number-box v-model="num" @change="valChange" :min="1"></u-number-box>
				</view>
				<view class="rect" @click="ok">确定</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {selectProductDetails,selectGroupRecords} from "../../api/index.js"
	import {goodscon,addcart,buy,proutTime} from "../../api/product.js"
	import countdown from "@/components/cz-countdown/jishiqi.vue"
	export default {
		data() {
			return {
				flashsale: 0, //0正常商品 1 会员产品 2推荐产品积分购买  4抢购商品 5 拼团商品
				count: 5,
				value: 5,
				tflag: 0,
				goodsinfo: {},
				index: "1",
				show: false,
				num: 1, //选择的数量
				type: null, //0加入购物车 1立即购买 2发起拼团 3 单独购买 4秒杀 6秒杀
				price: "",
				guige: [], //设置初始的规格
				guigelist: [], //储存规格选项组
				xuanze: {}, //选择的规格
				flag: true,
				isShow: false,
				img: "",
				stockNum:0,//商品库存
				yuan:'',
				groupList:[],
				id:"",
				activeId:null,//拼团id
				linePrice:""
			}
		},
		components:{countdown },
		onLoad(e) {
			
			if(e.type==4){
				this.getInfo(e.id,goodscon)
			}else if(e.type==5){
				this.id=e.id
				this.getInfo(e.id,selectProductDetails)
				this.getProple(e.id)
			}else{
				this.getInfo(e.id,goodscon)
			}
			this.flashsale = e.type
		},
		filters: {
			formatRichText(html) { //控制小程序中图片大小
				if (html) {
					let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
						match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
						return match;
					});
					newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					newContent = newContent.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;display:block;margin:0 auto;"');
					return newContent;
				} else {
					return '暂无商品详情'
				}
			}
		},
		methods: {
			toCart(){
				uni.switchTab({
					url:"/pages/car/car"
				})
			},
			// 查看大图
			previewImage(url,arr) {
				
				uni.previewImage({
					current:url,
					urls: arr
				});
			},
			// 选择规格
			xzgg(index, id) {
				this.flag = false
				this.guige[index] = id
				this.goodsinfo.goodsSku.forEach((item, i) => {
					if (item.specSkuId.indexOf("_") != -1) {
						let arr = item.specSkuId.split("_")
						let sort1 = arr.sort((a, b) => a - b)
						let arr1 = JSON.parse(JSON.stringify(this.guige))
						let sort2 = arr1.sort((a, b) => a - b)
						if (sort1.toString() == sort2.toString()) {
							this.xuanze = item
							this.price = item.goodsPrice
							this.img = item.imageUrl
							this.stockNum=item.stockNum
						}
					} else {
						let arr1 = JSON.parse(JSON.stringify(this.guige))
						if (item.specSkuId == arr1.toString()) {
							this.xuanze = item
							this.price = item.goodsPrice
							this.img = item.imageUrl
							this.stockNum=item.stockNum
						}
					}
				})
				this.flag = true
			},
			//点击计入拼团按钮
			toGroup(id){
				this.show = true
				this.activeId=id
			},
			// 执行秒杀
			buyMs(){
				uni.navigateTo({
					url: "/pages/product/order?goodsSkuId=" + this.xuanze.goodsSkuId + "&num=" + this.num + "&type=6"
				})
			},
			// 执行加入拼团
			buyGroup(){
				uni.navigateTo({
					url: "/pages/product/order?goodsSkuId=" + this.xuanze.goodsSkuId + "&num=" + this.num + "&type=5"+"&activeId="+this.activeId
				})
			},
			// 点击完成
			ok() {
				this.show = false
				if (this.Md.islogin()) {
					if (this.type == 0) {
						this.adcar()
					} else 
					if(this.type==1){
						this.buy()
					}else
					if(this.type==2){
						this.gruopBuy()
					}else
					if(this.type==3){
						this.myBuy()
					}else if(this.type==6){
						this.buyMs()
					}else{
						this.buyGroup()
					}
					
				}
			},
			// 发起拼团
			gruopBuy(){
				uni.navigateTo({
					url: "/pages/product/order?goodsSkuId=" + this.xuanze.goodsSkuId + "&num=" + this.num + "&type=4"
				})
			},
			// 单独购买
			myBuy(){
				uni.navigateTo({
					url: "/pages/product/order?goodsSkuId=" + this.xuanze.goodsSkuId + "&num=" + this.num + "&type=3"
				})
			},
			// 购买程序
			async buy() {
				let type = null
				if (this.goodsinfo.goods.isVip == 0) {
					if(uni.getStorageSync("yunbi").gradeName==''|| uni.getStorageSync("yunbi").gradeName==undefined){
						this.msg('非会员不可购买积分产品','none')
						return
					}
					type = 2
				} else {
					type = 1
				}
				uni.navigateTo({
					url: "/pages/product/order?goodsSkuId=" + this.xuanze.goodsSkuId + "&num=" + this.num + "&type=" + type
				})
			},
			// 加入购物车
			async adcar() {
				let res = await this.get(addcart, {
					id: uni.getStorageSync("userInfo").userId,
					num: this.num,
					goodsId: this.xuanze.goodsId,
					goodsSkuId: this.xuanze.goodsSkuId
				})
				this.msg("加入购物车成功")
			},
			// 点击加入购物车
			addcat() {
				this.show = true
				this.type = 0
			},
			// 点击立即购买
			mai(num) {
				this.show = true
				this.type = num
			},
			// banner index
			changeindex(e) {
				this.index = e.detail.current + 1
			},
			// 获取商品详情
			async getInfo(id,url) {
				let res = await this.get(url, {
					id: id
				})
				console.log(res)
				this.goodsinfo = res.data
				this.isShow = true
				// 设置显示的初始价格
				if (res.data.goodsSku.length > 0) {
					this.price = res.data.goodsSku[0].goodsPrice
					this.yuan=res.data.goodsSku[0].sharingPrice
					this.linePrice=res.data.goodsSku[0].linePrice
					this.img = res.data.goodsSku[0].imageUrl
					this.xuanze = res.data.goodsSku[0]
					this.stockNum=res.data.goodsSku[0].stockNum
					console.log("选择", this.xuanze)
				} else {
					this.msg("商品信息错误", "none")
				}
				if (res.data.specList.length > 0) {
					let data = res.data.specList
					this.guigelist = data
					data.forEach(item => {
						this.guige.push(item.groupBy[0].specValueId)
					})
					console.log(this.guige)
				}
			},
			// 点击顶部页面滑动
			tab(e) {
				console.log(e)
				this.tflag = e;
				if (e == 0) {
					uni.createSelectorQuery().select('.swiperbox').boundingClientRect(data => { //目标位置节点 类或者 id 
						uni.createSelectorQuery().select(".content").boundingClientRect((res) => { //最外层盒子节点类或者 id
							uni.pageScrollTo({
								duration: 200, //过渡时间
								scrollTop: data.top - res.top - 100, //到达距离顶部的top值
							})
						}).exec()
					}).exec();
				} else if (e == 1) {
					uni.createSelectorQuery().select('.pj-box').boundingClientRect(data => { //目标位置节点 类或者 id
						uni.createSelectorQuery().select(".content").boundingClientRect((res) => { //最外层盒子节点类或者 id
							uni.pageScrollTo({
								duration: 200, //过渡时间
								scrollTop: data.top - res.top - 100, //到达距离顶部的top值
							})
						}).exec()
					}).exec();
				} else {
					uni.createSelectorQuery().select('.fuwenb').boundingClientRect(data => { //目标位置节点 类或者 id
						uni.createSelectorQuery().select(".content").boundingClientRect((res) => { //最外层盒子节点类或者 id
							uni.pageScrollTo({
								duration: 200, //过渡时间
								scrollTop: data.top - res.top - 100, //到达距离顶部的top值
							})
						}).exec()
					}).exec();
				}
			},
			//拼团记录
			getProple(id){
				this.iget(selectGroupRecords,{id:id}).then(res=>{
					if(res.code==1){
						res.data.forEach(item=>{
							item.endTime=this.$u.timeFormat(item.endTime, 'yyyy-mm-dd hh:MM:ss')
							item.newTime=this.$u.timeFormat(item.nowTime, 'yyyy-mm-dd hh:MM:ss')
						})
						this.groupList=res.data
					}
					console.log(res)
				})
			},
			//查看评价列表
			gocommentlist() {
				let url='/pages/product/commentlist?id=' + this.goodsinfo.goods.goodsId
				if(this.flashsale==4||this.flashsale==5){
					url='/pages/product/commentlist?type=0&id=' + this.goodsinfo.goods.goodsId
				}
				uni.navigateTo({
					url:url
				})
			},
			// 拼团倒计时结束
			async delTime(id){
				let res=await this.get(proutTime,{activeId:id})
				this.getProple(this.id)
			}
		},
	}
</script>

<style lang="less" scoped>
	.gcon{
		height: 66rpx;
		line-height: 66rpx;
		background-color: #F6F6F6;
		text-align: center;
		margin-top: 20rpx;
	}
	.no{
		text-align: center;
	}
	.piimg-box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.piimg-box>image {
		width: 120rpx;
		height: 120rpx;
		margin: 0 10rpx;
	}

	.guigeitemtitle {
		background-color: #999999;
		font-size: 24rpx;
		padding: 4rpx 14rpx;
		border-radius: 30rpx;
		margin: 10rpx 10rpx;
		color: #333;
	}

	.guigeitemtitlestyle {
		background-color: #F0812D !important;
		color: #FFFFFF !important;
	}

	.guigeitem {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

	}
	.guigetitle {
		font-size: 26rpx;
		color: #666666;

	}
	.guigebox {
		border-bottom: 1px #999 solid;
		margin-bottom: 30rpx;
	}
	.numbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}
	.rect {
		width: 100%;
		height: 66rpx;
		background-image: linear-gradient(to right, #F3C44E, #ED6138);
		text-align: center;
		line-height: 66rpx;
		color: #FFFFFF;
		border-radius: 100rpx;
	}
	.geprice {
		font-size: 32rpx;
		color: #F0812D;
		font-weight: bold;
	}
	.gename {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #666666;
	}
	.r-g-box {
		width: 400rpx;
		height: 100%;
		margin-left: 20rpx;
	}
	.gebox {
		display: flex;
		height: 200rpx;
		align-items: center;
	}
	.minimg {
		width: 160rpx;
		height: 160rpx;
		position: relative;
		top: -60rpx;
		border-radius: 20rpx;
	}
	.warp {
		width: 100%;
		padding: 0 40rpx 40rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
	}

	/* 拼团信息 */
	.spell-box {
		width: 100%;
		background: #fff;
		// view {
		// 	display: inline-block;
		// 	vertical-align: top;
		// }
		.spell-title {
			width: 100%;
			border-bottom: 1px solid #f1f3f6;
			line-height: 32px;
			display: flex;
			align-items: center;
			.spell-left {
				width: 25%;
				padding-left: 4%;
				font-size: 28rpx;
				font-weight: bold;
			}
			.spell-center {
				width: 52%;
				font-size: 28rpx;
				font-weight: bold;
			}
			.spell-right {
				width: 23%;
				text-align: center;
				color: #F0812D;
				font-weight: bold;
			}
		}
		.spell-content {
			width: 100%;
			height: 40px;
			display: flex;
			align-items: center;
			.spell-left {
				width: 30%;
				padding-left: 4%;
				overflow-x: auto;

				image {
					height: 50rpx;
					margin: 8px 0 0;
					width: 50rpx;
					border-radius: 100%;
				}
			}
			.time-box{
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 40rpx;
				height: 100%;
			}
			.spell-center {
				width: 20%;
				line-height: 40px;
				font-size: 14px;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				
			}
			.spell-right {
				width: 23%;
				text-align: center;
				height: 100%;
				view {
					width: 100rpx;
					line-height: 26px;
					color: #fff;
					background-image: linear-gradient(to right, #F3C44E, #ED6138);
					margin-top: 7px;
					font-size: 12px;
					border-radius: 8px;
					padding: 0 5px;
				}
			}
		}
	}

	.juli {
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.ago {
		font-size: 24rpx;
		font-weight: 400;
		color: #D6D6D6;
	}

	.after {
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.seckill_price {
		width: 490rpx;
		padding-left: 10rpx;
	}

	.pseckill_price {
		width: 490rpx;
		padding-left: 10rpx;
		display: flex;
		align-items: center;
	}

	.seckill {
		height: 88rpx;
		border-radius: 28rpx;
		background-color: #013A94;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 50rpx;
	}

	.btn {
		background-image: linear-gradient(to right, #F3C44E, #ED6138);
		color: #FFFFFF;
		font-size: 26rpx;
		height: 60rpx;
		width: 152rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 60rpx;
		margin-right: 30rpx;
	}

	.btnbox {
		width: 750rpx;
		height: 90rpx;
		background: #F6F6F6;
		opacity: 1;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.navb::after {
		content: "";
		width: 80rpx;
		height: 4rpx;
		background-color: #F0812D;
		position: absolute;
		bottom: 0;
		left: -10rpx;
	}

	.fuwenb {
	}

	.dptitle {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42px;
		color: #333333;
		opacity: 1;

	}

	.dplogo {
		display: flex;
		align-items: center;
		height: 70rpx;
	}

	.dp-box {
		width: 690rpx;
		height: 70rpx;
		margin: 40rpx auto 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.logo {
		width: 65rpx;
		height: 65rpx;
		border-radius: 65rpx;
		margin-right: 10rpx;
	}

	.allp {
		width: 241rpx;
		height: 60rpx;
		border: 1px solid #707070;
		opacity: 1;
		border-radius: 41rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 60rpx;
		color: #333333;
		opacity: 1;
		margin: auto;
		text-align: center;

	}

	.time {
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 300;
		line-height: 33rpx;
		color: #666;
		opacity: 1;
		margin-top: 20rpx;

	}

	.pcon {
		max-height: 66rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #333333;
		opacity: 1;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */

	}

	.content {
		padding-bottom: 100rpx;
	}

	.pimg {
		width: 60rpx;
		height: 60rpx;
		background: rgba(0, 0, 0, 0);
		border-radius: 50%;
		opacity: 1;
		margin-right: 20rpx;

	}

	.pc-name {
		font-size: 24rpx;
		color: #666666;
	}

	.pc-item {
		width: 690rpx;
		margin: 0 auto 30rpx;
	}

	.pc-i-t {
		display: flex;
		align-items: center;
		height: 80rpx;
	}

	.good {
		font-size: 26rpx;
		line-height: 37px;
		color: #999999;

	}

	.pinjia {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;

	}

	.pj-box {
		width: 690rpx;
		height: 40rpx;
		margin: 20rpx auto 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.x-box {
		width: 690rpx;
		height: 40rpx;
		margin: 20rpx auto 30rpx;
		display: flex;
		justify-content: space-between;
		color: #666666;
	}

	.x-item {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #666666;
	}

	.pname {
		width: 690rpx;
		height: 90rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 45rpx;
		color: #000000;
		opacity: 1;
		margin: auto;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */

	}

	.by {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #999;
		padding: 4rpx 10rpx;
		border-radius: 40rpx;
		margin-left: 40rpx;
		border: 1px #999 solid;
	}

	.lickimg {
		width: 24rpx;
		height: 20rpx;
		position: absolute;
		right: 40rpx;
	}

	.price {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #F0812D;
		opacity: 1;

	}

	.p-box {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.num {
		position: absolute;
		right: 40rpx;
		bottom: 40rpx;
		background-color: rgba(0, 0, 0, 0.7);
		color: #FFFFFF;
		padding: 4rpx 10rpx;
		border-radius: 30rpx;
		line-height: 24rpx;
		font-size: 24rpx;
	}

	swiper-item {
		width: 750rpx;
		height: 750rpx;
	}

	swiper-item>image {
		width: 750rpx;
		height: 750rpx;
	}

	.swiper {
		width: 750rpx;
		height: 750rpx;
	}

	.swiperbox {
		width: 750rpx;
		height: 750rpx;
		position: relative;
	}

	.slot-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 500rpx;
		margin: auto;
		padding-right: 80rpx;
		position: relative;
	}

	.navitem {
		margin: 0 20rpx;
		padding: 20rpx 0;
		height: 100%;
		font-size: 28rpx;
		font-weight: bold;
		position: relative;
	}
	.cart{
		position: absolute;
		right: 0;
		right: -40rpx;
	}
</style>
